<template>
  <div class="drop">
      <van-dropdown-menu >
        <van-dropdown-item disabled title='全部'/>
        <van-dropdown-item 
        title='价格' v-model="value2" 
        :options="option2"
         @change="pirceChange"
         />
         <van-dropdown-item 
         title='分类'  
         v-model="value3" 
         :options="filterCategory"
         @change="categoryChange"
         />
      </van-dropdown-menu>

        <ol>
            <li v-for="(item,index) in goodsList" :key="index" @click="gotoDetail(item.id)">
                <div><img v-lazy="item.list_pic_url" alt=""></div>
                <p>{{item.name}}</p>
                <span>{{item.retail_price|formPrice}}</span>
            </li>
       </ol>
  </div>
</template>

<script>
export default {
data(){
    return{
         value2:'desc',
         value3:0,
         option2: [
            { text: '价格由高到低', value: 'desc' },
            { text: '价格由低到高', value: 'asc' },
         ],     
    } 
},
computed: {
    // value3: {
    //   get() {
    //     let val = "";
    //     this.filterCategory.forEach((item) => {
    //       if (item.checked) {
    //         val = item.value;
    //       }
    //     });
    //     return val;
    //   },
    //   set(m) {
    //     console.log(m);
    //   },
    // },
  },
created(){
    console.log(this.filterCategory);
},
props:['filterCategory','goodsList'],

methods:{
    pirceChange(value){
        console.log(value);
     this.$emit("priceChange", value);
    },
    categoryChange(value){
         console.log(this.filterCategory);
        this.$emit('categoryChange' , value)
    },
    gotoDetail(id){
        this.$router.push({path:'/detail' , query:{id:id}})
    }
}
}
</script>

<style lang='less' scoped>
.drop{
    ol{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
   
        li{
            text-align: center;
            position: relative;
            width: 50%;
            margin-bottom: 5px;
            div{
                width: 95%;
                margin: 0 auto;
            }
            img{
                width: 100%;
            }
            p{
                width: 90%;
                margin: 0 auto;
                text-align: center;
                white-space: nowrap;
                text-overflow:ellipsis;
                overflow: hidden;
                font-size: 16px;
                color: black;
            }
            span{
                
                font-size: 16px;
                
                color: rgb(151, 30, 30);
            }
        }
}
}
</style>